<template>
  <div>
    <el-dialog
        :title="config.title"
        v-el-drag-dialog
        :visible="config.show===true"
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="上级菜单：" prop="parentCatalog">
              <el-select
                  v-model="form.parentCatalog"
                  placeholder="请选择"
                  ref="parentCatalogSelect"
                  style="width: 100%"
              >
                <el-input
                    class="input"
                    placeholder="输入关键字进行过滤"
                    prefix-icon="el-icon-search"
                    v-model="parentCatalogFilter"
                    size="mini"
                    clearable
                ></el-input>
                <el-option hidden key="id" :value="form.parentCatalog" :label="form.parentCatalogName">
                </el-option>
                <el-tree
                    :data="param.parentCatalogTreeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                    accordion
                    ref="tree"
                    node-key="id"
                    :default-expand-all="false"
                    :filter-node-method="filterNode"
                >

                  <span slot-scope="{ data }">
                    <span>{{ data.label }}</span>
                    <!-- 2022年3月31日 LQ 这个没什么用啊，先去掉
                     <el-tag
                          size="mini"
                          style="margin: 0 10px"
                          v-show="filterorgType(data.tag)"
                      >{{ filterorgType(data.tag) }}</el-tag
                      >-->
                  </span>
                </el-tree>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务名称：" prop="name">
              <el-input v-model="form.name" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务类型：" prop="serviceType" placeholder="请选择服务类型">
              <el-select v-model="form.serviceType" filterable value-key style="width: 100%">
                <el-option v-for="serviceType in param.serviceTypes" :key="serviceType.value" :label="serviceType.name"
                           :value="serviceType.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="服务地址：" prop="url">
              <el-input v-model="form.url" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投影类型：" prop="prjType">
              <el-select v-model="form.prjType" value-key="value" style="width: 100%" placeholder="请选择投影类型">
                <el-option v-for="prjType in param.prjTypes" :key="prjType.value" :label="prjType.name"
                           :value="prjType.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="可见级别：">
          <el-col :span="6">
            <el-input v-model="form.zmin" type="text" placeholder="最小可见级别" style="width: 100%"></el-input>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="6">
            <el-input v-model="form.zmax" type="text" placeholder="最大可见级别" style="width: 100%"></el-input>
          </el-col>
        </el-form-item>
        <el-row>
          <el-col :span="7">
            <el-form-item label="是否可见：" prop="isvisible">
              <el-switch v-model="form.isvisible"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否注记：" prop="isLabel">
              <el-switch v-model="form.isLabel"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-dialog width="80%" title="测试地图" :visible.sync="testMapDialogShow" :close-on-click-modal="false" append-to-body>
        <component :is="testMapService" :config="testMapConfig"></component>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleOk">{{config.okBtnText}}</el-button>
				<el-button @click="handleTest">测试</el-button>
				<el-button @click="handleConnect">连接</el-button>
				<el-button @click="handleClose">取消</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import elDragDialog from '@/views/resource/dialogEditForm/editCatalogService'
import { insertMapSource, updateMapSource } from '@/api/resource/mapSource'

export default {
  name: "editMapService",
  data() {
    return {
      parentCatalogFilter: "",
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      fileList: [],
      rules: {
        parentCatalog: [{required: true, message: '请选择上级菜单', trigger: 'blur'}],
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        serviceType: [{required: true, message: '请选择服务类型', trigger: 'blur'}],
        url: [{required: true, message: '请输入地址', trigger: 'blur'}],
        prjType: [{required: true, message: '请选择投影类型', trigger: 'blur'}],
      },
      testMapDialogShow: false,
      testMapService:undefined,
      testMapConfig: {}
    }
  },
  directives: {//到这里了，看看自定义组件怎么个用法
    elDragDialog,
  },
  props: {
    config: {
      type: Object,
      default() {
        return {
          title: "",
          show: false,
          itemShow:{
            isLabel:true
          },
          okBtnText: "确定",
        }
      }
    },
    param: {
      type: Object,
      default() {
        return {
          parentCatalogTreeData: [],
          prjTypes: [],
          serviceTypes: []
        };
      }
    },
    form: {
      type: Object,
      default() {
        return {
          id:"",
          operatetype:"",
          parentCatalog: "",
          parentCatalogName: "", // select框显示的name
          isLabel: false,
          name: "",
          serviceType: "",
          date: "",
          url: "",
          zmax: "",
          zmin: "",
          legend: "",//图例地址
          isvisible: false,
          prjType: "",
          sortid:1,
        }
      }
    },
  },
  methods: {
    handlePreview() {
    },
    handleRemove() {
    },
    handleClose() {
      let that = this;
      that.config.show = false;
    },
    handleTest() {
      let that = this;
      that.testMapConfig = {
        url:that.form.url,
        sys:"EPSG:"+that.form.prjType,
        name:that.form.name,
        id:"testLayer",
        type:parseFloat(that.form.serviceType),
        zIndex:1
      };
      that.testMapService =resolve => require(['@/components/Map/mapService'], resolve);
      that.testMapDialogShow = true;
    },
    handleConnect() {
      let that = this;
      let layerInfo = new ol.supermap.LayerInfoService(that.form.url);
      that.$message(layerInfo);
    },
    /**
     * 添加
     */
    handleOk() {
      let that = this;
      let param = {
        "pid": that.form.parentCatalog,
        "name": that.form.name,
        "servicetypevalue": parseFloat(that.form.serviceType),
        "url": that.form.url,
        "sys": parseInt(that.form.prjType),
        "sortid": that.form.sortid,
        "islabel": that.form.isLabel ? 1 : 0,
        "isvisible": that.form.isvisible ? 1 : 0,
        "zmin": parseInt(that.form.zmin),
        "zmax": parseInt(that.form.zmax)
      };
      if(that.form.operatetype=="updateService"){
        param.id=that.form.id;
        updateMapSource(param).then((res) => {
          bus.$emit("refreshMapSource");
          that.config.show = false;
        }).catch(resp => {
          console.log('updateMapSource', resp.status + "," + resp.statusText);
        });
      }
      if(that.form.operatetype=="insertService"){
        insertMapSource(param).then((res) => {
          bus.$emit("refreshMapSource");
          that.config.show = false;
        }).catch(resp => {
          console.log('insertMapSource', resp.status + "," + resp.statusText);
        });
      }
    },

    // 结构树点击事件
    handleNodeClick(currentData) {
      let that = this;
      that.form.parentCatalog = currentData.id; // select绑定值为点击的选项的value
      that.form.parentCatalogName = currentData.label; // input中显示值为label
      that.parentCatalogFilter = ""; // 点击后搜索框清空
      that.$refs.parentCatalogSelect.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠

    },
    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.label.indexOf(value) !== -1;
      return filterRes;
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .line {
  text-align: center;
}

::v-deep .el-form-item {
  //margin-bottom: 10px;
}
</style>
<style lang="css" scoped>
::v-deep input[type="file"] {
  display: none;
}
</style>
